<script>
import {createProps} from '@/utils';
import {Tabs} from 'ant-design-vue';
import VariableContentRegistry
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/VariableContentRegistry';

export default {
  name: 'VariableContainer',
  props: {
    config: createProps(Object, () => ({
      containers: [],
      formDefinition: undefined
    })),
  },
  data() {
    return {
      active: undefined,
    };
  },
  render(h) {
    if (!this.config || !this.config.formDefinition) return;
    let contents = this.getContents();
    if (!contents || !contents.length) return;

    return h('div', {class: 'variable-container'}, [
      this.renderTabs(contents),
      this.renderBody(contents)
    ]);
  },
  methods: {
    getContents() {
      let map = VariableContentRegistry || [], res = [];
      let containers = this.config && this.config.containers || [];
      containers.forEach(content => {
        if (map[content]) {
          map[content].key = content;
          res.push(map[content]);
        } else if (content && content.name && map[content.name]) {
          content.comp = content.comp || map[content.name].comp
          res.push(content);
        }
      });
      return res;
    },
    renderTabs(contents) {
      return this.$createElement('div', {class: 'variable-container-tabs'}, [
        this.$createElement(Tabs, {
          props: {
            activeKey: this.active,
          },
          on: {
            change: v => {
              this.active = v
            },
          }
        }, this.renderTabPanels(contents))
      ]);
    },
    renderTabPanels(contents) {
      let res = [], set = new Set();
      contents.forEach(content => {
        set.add(content.key);
        res.push(this.$createElement(Tabs.TabPane, {
          key: content.key || (content + '').toString(),
          props: {
            key: content.key || (content + '').toString(),
            tab: content.title
          }
        }));
      });
      if (!this.active || !set.has(this.active)) {
        if(!contents || !contents.length) return res
        let content = contents[0];
        this.active = content.key || (content + '').toString();
      }
      return res;
    },
    renderBody(contents) {
      let comp = (contents || []).find(content => content.key === this.active);
      return comp && this.$createElement('div', {class: 'variable-container-body', key: comp.key}, [
        this.$createElement(comp.comp, {
          props: {
            config: {
              ...this.config,
              ...(comp && comp.config || {}),
              ...(comp || {})
            },
          },
          on: {
            addVariable: (variable) => {
              this.$emit('addVariable', variable);
            },
            selectVariable: (variable) => {
              this.$emit('selectVariable', variable);
            }
          }
        })
      ]);
    },
  }
};
</script>
<style>
.variable-container {
  display: flex;
  flex-direction: column;
}

.variable-container-tabs {
  height: fit-content;
}

.variable-container {
  width: 100%;
  height: 100%;
}

.variable-container-body {
  flex: 1;
  width: 100%;
  overflow: auto;
}
</style>